<template>
	<!-- @touchmove.prevent  @mousewheel.prevent="mousewheelClick" -->
	<div class="img-preview-container" :style="{ width: getImgContainerWidth, height: getImgContainerHeight }" id="pc-img-preview-container">
		<img src="../../assets/preview-icon/colse-icon.png" :class="type === 'mobile' ? 'colse-icon-mobile' : 'colse-icon-pc'" @click="colseImgPreView" />
		<p class="centage-text" v-show="percentage">{{ percentage }}</p>
		<div class="pc-iamge" ref="pcImage">
			<img :src="imgUrl" alt="" id="pc-zco-im-preview-image" />
		</div>
		<div :class="type === 'mobile' ? 'fotter-mobile' : 'fotter-pc'">
			<img :src="smallButtonDisable ? reduceGrey : reduceIcon" class="reduce-icon" @click="narrow" id="reduce-icon" />
			<img :src="largeButtonDisable ? addGrey : addIcon" class="add-icon" id="add-icon" @click="enlarge" />
		</div>
	</div>
</template>

<script>
import ZcoIM from '../../index';
const panzoom = require('panzoom');
export default {
	name: 'ImgPreview',
	components: {},
	props: {
		imgUrl: {
			type: String,
			require: true,
			default: () => ''
		}
	},
	data() {
		return {
			imgWidth: '',
			imgHeight: '',
			imageSize: '',
			type: ZcoIM.type,
			scale: 1,
			percentage: null, // 放大缩小之后的百分比
			smallButtonDisable: false,
			reduceIcon: require('../../assets/preview-icon/reduce-icon.png'),
			reduceGrey: require('../../assets/preview-icon/reduce-grey.png'),
			largeButtonDisable: false,
			addIcon: require('../../assets/preview-icon/add-icon.png'),
			addGrey: require('../../assets/preview-icon/add-grey.png')
		};
	},
	computed: {
		getImgContainerWidth() {
			return window.innerWidth + 'px';
		},
		getImgContainerHeight() {
			return window.innerHeight + 'px';
		}
	},
	watch: {},
	created() {},
	mounted() {
		this.$nextTick(() => {
			this.getImageSize();
		});
		/* window.onmousewheel = function (e) {
			console.warn('禁用滚轮', e);
			e.preventDefault();
			return false;
		}; */
	},

	methods: {
		colseImgPreView() {
			if (this.instance) {
				this.instance.dispose();
				this.instance = null;
			}
			this.$emit('colseImgPreView');
		},
		narrow() {
			this.scale -= 0.08;
			if (this.scale <= 0.02) {
				document.getElementById('reduce-icon').style.disabled = true;
				document.getElementById('add-icon').style.disabled = false;
				this.scale = 0.02;
				this.smallButtonDisable = true;
				this.largeButtonDisable = false;
			}
			const image = document.getElementById('pc-zco-im-preview-image');
			image.style.transform = `translate(${this.translateX}px, ${this.translateY}px) scale(${this.scale}) `;
			if (this.largeButtonDisable) {
				this.largeButtonDisable = false;
				document.getElementById('add-icon').style.disabled = false;
			}
			this.percentage = parseInt(this.scale * 100) + '%';
			console.log('zco-narrow-缩小的百分比：', parseInt(this.scale * 100) + '%', new Date());
		},
		enlarge() {
			this.scale += 0.08;
			if (this.scale >= 4.98) {
				document.getElementById('add-icon').style.disabled = true;
				document.getElementById('reduce-icon').style.disabled = false;
				this.scale = 4.98;
				this.largeButtonDisable = true;
				this.smallButtonDisable = false;
			}
			const image = document.getElementById('pc-zco-im-preview-image');
			image.style.transform = `translate(${this.translateX}px, ${this.translateY}px) scale(${this.scale}) `;
			if (this.smallButtonDisable) {
				this.smallButtonDisable = false;
				document.getElementById('reduce-icon').style.disabled = false;
			}
			this.percentage = parseInt(this.scale * 100) + '%';
			console.log('zco-enlarge-放大之后的百分比：', parseInt(this.scale * 100) + '%', new Date());
		},
		getImageSize() {
			const self = this;
			const image = document.getElementById('pc-zco-im-preview-image');
			if (image.naturalWidth <= 0 || image.naturalHeight <= 0) {
				setTimeout(() => {
					self.getImageSize();
				}, 1);
			} else {
				this.resizeImage();
			}
		},
		resizeImage() {
			this.$nextTick(() => {
				console.log('zco-im-imgpreview-type:', ZcoIM.type, new Date());
				// H5端：图片宽度=设备宽度(375)；图片高度=设备高度-50PX
				console.warn('zco-im-PC-设备宽度：', window.innerWidth, window.innerHeight);
				// 获取图片实际宽高
				const image = document.getElementById('pc-zco-im-preview-image');
				let scale = 1.0;
				let imageWidth = image.naturalWidth;
				let imageHeight = image.naturalHeight;
				this.translateX = 0;
				this.translateY = 0;
				image.style.transformOrigin = 'center center';
				console.log('zco-im-imgpreview-实际宽高：', image.naturalWidth, image.naturalHeight, image, new Date());

				// 图片宽高均小于展示区域宽高,则展示原始尺寸
				if (image.naturalWidth < window.innerWidth && image.naturalHeight < window.innerHeight) {
					this.imgWidth = image.naturalWidth + 'px';
					this.imgHeight = image.naturalHeight + 'px';
					scale = 1.0;
				}

				// 图片高度超过展示区域高度，宽度未超过,则高度 = 展示区域高度，宽度等比缩小
				if (image.naturalHeight > window.innerHeight && image.naturalWidth <= window.innerWidth) {
					this.imgHeight = window.innerHeight + 'px';
					scale = window.innerHeight / image.naturalHeight;
					scale = Math.max(scale, 0.02);
					imageWidth = Math.ceil(image.naturalWidth * scale);
					this.imgWidth = imageWidth + 'px';
					console.log('zco-im-imgpreview:', this.imgHeight, '高度 = 展示区域高度', new Date());
				}

				// 图片宽度超过展示区域宽度，高度未超过,则宽度 = 展示区域宽度，高度等比缩小
				if (image.naturalWidth > window.innerWidth && image.naturalHeight <= window.innerHeight) {
					this.imgWidth = window.innerWidth + 'px';
					scale = window.innerWidth / image.naturalWidth;
					scale = Math.max(scale, 0.02);
					imageHeight = Math.ceil(image.naturalHeight * scale);
					this.imgHeight = imageHeight + 'px';
				}

				// 图片宽高均超过，展示区域且《宽高比》大于 展示区域宽高比，则高度等于展示区域高度，图片宽度等比缩小
				if (image.naturalWidth > window.innerWidth && image.naturalHeight > window.innerHeight) {
					const scaleX = window.innerWidth / image.naturalWidth;
					const scaleY = window.innerHeight / image.naturalHeight;
					scale = Math.min(scaleX, scaleY);
					scale = Math.max(scale, 0.02);
					this.imgWidth = Math.ceil(image.naturalWidth * scale) + 'px';
					this.imgHeight = Math.ceil(image.naturalHeight * scale) + 'px';
				}
				// 图片宽高均超过展示区域且宽高比小于《展示区域宽高比》，则宽度等于展示区域宽度，图片高度等比缩小
				scale = Math.min(scale, 1);
				scale = Math.max(scale, 0.02);
				this.scale = scale;
				image.style.transform = `translate(${this.translateX}px, ${this.translateY}px) scale(${this.scale}) `;
				this.initPanZoom();
			});
		},
		initPanZoom() {
			if (this.instance) {
				return;
			}
			this.instance = panzoom(this.$refs.pcImage, {
				maxZoom: 4.98,
				minZoom: 0.02,
				zoomSpeed: 0.08,
				pinchSpeed: 0.08,
				bounds: false,
				boundsPadding: 0.5,
				zoomDoubleClickSpeed: 1,
				smoothScroll: false, //禁用平滑滚动
				// 禁止鼠标滑轮滚轮
				beforeWheel: function (e) {
					// console.warn('zcm-beforeWheel: 滚轮', e);
					// allow wheel-zoom only if altKey is down. Otherwise - ignore
					var shouldIgnore = !e.altKey;
					return shouldIgnore;
				}
				// onTouch: function () {
				// 	// `e` - is current touch event.
				// 	return false; // tells the library to not preventDefault.
				// }
			});
		}
	},
	beforeDestroy() {
		if (this.instance) {
			this.instance.dispose();
		}
	}
};
</script>

<style scoped>
/* 公共样式 */
.img-preview-container {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #000000a8;
	z-index: 1000;
}
.img-preview-container .pc-iamge {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* pc样式 */
.img-preview-container .colse-icon-pc {
	width: 44px;
	height: 44px;
	position: absolute;
	top: 32px;
	right: 32px;
	z-index: 100;
}
.img-preview-container .pc-iamge .img-box {
	width: 964px;
	height: 741px;
}
.img-preview-container .fotter-pc {
	text-align: center;
	width: 100%;
	position: absolute;
	bottom: 24px;
	right: 0;
}
.img-preview-container .fotter-pc > img {
	width: 26px;
	height: 26px;
}
.img-preview-container .fotter-pc .reduce-icon {
	margin-right: 36px;
}
.img-preview-container .centage-text {
	width: 112px;
	height: 50px;
	border-radius: 7px;
	background-color: rgba(0, 0, 0, 0.27);
	z-index: 35;
	text-align: center;
	line-height: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 20px;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #f8f8f8;
}
/*  移动端样式 */
.img-preview-container .colse-icon-mobile {
	width: 24px;
	height: 24px;
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 100;
}
@media screen and (max-width: 979px) {
	.img-preview-container .mobile-iamge .img-box {
		width: 100%;
		height: 100%;
	}
}
.img-preview-container .fotter-mobile {
	text-align: center;
	width: 100%;
	position: absolute;
	bottom: 14px;
	right: 0;
}
.img-preview-container .fotter-mobile > img {
	width: 26px;
	height: 26px;
	cursor: pointer;
}
.img-preview-container .fotter-mobile .reduce-icon {
	margin-right: 28px;
}
</style>
